<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>待办事项列表</title>
    <style>
        /* 为已完成的事项添加删除线样式 */
        .completed {
            text-decoration: line-through;
        }
    </style>
</head>

<body>
    <!-- 输入框 -->
    <input type="text" id="taskInput" placeholder="输入待办事项">
    <!-- 添加按钮 -->
    <button id="addButton">添加</button>
    <!-- 待办事项列表 -->
    <ul id="taskList"></ul>

    <script src="script.js"></script>

<script>
// 获取输入框、添加按钮和待办事项列表元素
const taskInput = document.getElementById('taskInput');
const addButton = document.getElementById('addButton');
const taskList = document.getElementById('taskList');

// 为添加按钮添加点击事件监听器
addButton.addEventListener('click', function () {
    // 获取输入框的值
    const taskText = taskInput.value;
    if (taskText.trim()!== '') {
        // 创建新的列表项
        const listItem = document.createElement('li');
        listItem.textContent = taskText;

        // 创建删除按钮
        const deleteButton = document.createElement('button');
        deleteButton.textContent = '删除';
        // 为删除按钮添加点击事件监听器
        deleteButton.addEventListener('click', function () {
            taskList.removeChild(listItem);
        });

        // 为列表项添加点击事件监听器，用于标记为已完成
        listItem.addEventListener('click', function () {
            listItem.classList.toggle('completed');
        });

        // 将删除按钮添加到列表项中
        listItem.appendChild(deleteButton);
        // 将列表项添加到待办事项列表中
        taskList.appendChild(listItem);

        // 清空输入框
        taskInput.value = '';
    }
});
</script>
</body>
</html>